import { useContext } from "react";
import myContext from "./context";
import './style.css'
const Demo7 = () => {
  const context = useContext(myContext);
  return (
    <div>
      <h1>Demo7</h1>

      <div>name: {context.currentTheme.name}</div>
      <div>theme: {context.currentTheme.theme}</div>

      <hr />
      <button onClick={(e) => context.setCurrentTheme(context.themeList[0], e.nativeEvent as MouseEvent)}>明亮</button>
      <button onClick={(e) => context.setCurrentTheme(context.themeList[1], e.nativeEvent as MouseEvent)}>黑暗</button>
      <button onClick={(e) => context.setCurrentTheme(context.themeList[1], e.nativeEvent as MouseEvent)}>跟随系统</button>
    </div>
  );
};

export default Demo7;
